<template>
    <div class="register">
        <el-card class="box-card">
            <template #header>
                <div class="register_header">
                    <span>注册</span>
                </div>
            </template>
            <div class="register_content">
                <el-form :model="form" ref="formRef" label-width="80px">
                    <el-row>
                        <el-col>
                            <el-form-item label="用户名" prop="username" :rules="[{required: true, message: '请输入用户名'}]">
                                <el-input v-model="form.username"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item label="密码" prop="password" :rules="[{required: true, message: '请输入密码'}]">
                                <el-input v-model="form.password" type="password"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item label="手机号" prop="phone" :rules="[{required: true, message: '请输入手机号'}, {type: 'number', message: '手机号必须是数字'}]">
                                <el-input v-model.number="form.phone"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <div style="text-align: center">
                                <el-button @click="onSubmit(formRef)" type="success">注册</el-button>
                                <el-button @click="onLogin" type="primary">登录</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">

import {reactive, ref} from "vue";
import type {FormInstance} from "element-plus";
import http from "@/utils/http";
import router from "@/router";

const form = reactive({
    username: '',
    password: '',
    phone: null,
})

const formRef = ref<FormInstance>()
const onSubmit = async (formEl: FormInstance | undefined)  => {
    if(!formEl) return
    await formEl.validate((valid, fields) => {
        if(valid){
            console.log('验证通过')
            http.post('/users', form).then(res => {
                console.log(res)
                formEl.resetFields()
                router.push('/login')
            })
        }else {
            console.log(fields)
        }
    })
}

const onLogin = () => {
    router.push('/login')
}

</script>

<style scoped lang="scss">
.register{
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, #092b00, #f6ffed);
    display: flex;
    justify-content: center;
    align-items: center;
    .box-card{
        width: 25%;
    }
}
</style>